<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>抖店店铺概览 - 电商ERP系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">
<div class="layui-body" style="padding:15px;">
    <style>
        .message-body {}

        .message-top {
            background: #fff;
            padding: 30px;
        }

        .message-body .content-title {

            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .message-body .content-title .label {
            font-weight: bold;
            font-size: 16px;
            color: #333;
        }

        .message-body .content-title span {
            font-size: 13px;
            color: #999;
            margin-left: 5px;
        }

        .message-body .order-list {
            display: flex;
            align-items: center;
            justify-content: space-around;
            background: #F2F2F2;
        }

        .message-body .order-item {
            width: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px 0;
            margin: 10px;
            background: #fff;
        }

        .message-body .order-label {
            font-size: 14px;
            color: #999;
        }

        .message-body .order-num {
            margin-top: 20px;
            font-size: 20px;
            font-weight: bold;
        }

        .message-card-box {
            background: #fff;
            margin: 10px auto;
            padding: 60px 0;
        }

        .my-tab-brief {
            background: #fff;
            width: 90%;
            margin: 0 auto;
        }

        .my-tab-brief .layui-tab-title {
            background: #fff;
            display: flex;

        }

        .my-tab-brief .layui-tab-title li {
            border-right: 1px solid #e6e6e6;
            width: 20%;
            padding: 0;
            margin: 0;
        }

        .my-tab-brief .layui-tab-title span {
            color: #FF5722;
            margin-left: 5px;
            font-weight: bold;
        }

        .my-tab-brief .layui-tab-title li:last-child {
            border-right: none;
        }

        .my-tab-brief .layui-tab-title .layui-this {
            border-right: none;
            background: #009688;
            color: #fff;
        }

        .my-tab-brief .massgae-box {
            padding: 0 15px;
        }

        .my-tab-brief .message-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            line-height: 24px;
            color: #999;
        }

        .message-left {
            width: 80%;
            display: flex;
            align-items: center;
        }

        .message-left img {
            margin-right: 5px;
            width: 22px;
            height: 22px;
            object-fit: contain;
        }

        .message-right {
            color: #999;
        }
    </style>
    <h1 th:text="${msg}"></h1>
    <div class="layui-tab layui-tab-brief " lay-filter="demo">
        <ul class="layui-tab-title">
            <li class="layui-this"><a th:href="@{/douyin/dashboard(shopId=${shopId})}">首页</a></li>
            <li><a th:href="@{/douyin/order_list(shopId=${shopId})}">订单管理</a></li>
            <li><a th:href="@{/douyin/refund_list(shopId=${shopId})}">退货管理</a></li>
            <li><a th:href="@{/shop/goods_list(shopType=6,shopId=${shopId})}">商品管理</a></li>

        </ul>
    </div>
    <fieldset class="layui-elem-field message-body">
        <legend>
            <div>
                <span class="label" th:text="${shop.name}"></span>
                <a class="layui-btn layui-btn-normal dyauth" style="margin-left: 15px;" href="javascript:;"  th:attr="shopId=${shop.getId()}">店铺授权</a>
            </div>
        </legend>
        <div class="layui-field-box message-top">
            <div class="order-list">
                <a class="order-item" th:href="@{/douyin/order_list(shopId=${shopId},status=${waitSendOrderStatus})}">
                    <div class="order-label">待发货订单</div>
                    <div class="order-num" th:text="${report.waitSendOrder}" style="color: red">100</div>
                </a>

                <div class="order-item">
                    <div class="order-label">今日订单</div>
                    <div class="order-num" th:text="${report.todayOrder}" style="color: #018AED">100</div>
                </div>
                <div class="order-item">
                    <div class="order-label">今日有效订单</div>
                    <div class="order-num" th:text="${report.todayValidOrder}" style="color: #9F9F9F">100</div>
                </div>
                <div class="order-item">
                    <div class="order-label">今日成交金额</div>
                    <div class="order-num" th:text="${#numbers.formatDecimal(report.todayValidOrderAmout, 1, 2)}"
                        style="color: red">100</div>
                </div>
                <div class="order-item">
                    <div class="order-label">待处理退货</div>
                    <div class="order-num" th:text="${report.waitAuditReturn}" style="color: #28a605">100</div>
                </div>
            </div>
        </div>

    </fieldset>


    <fieldset class="layui-elem-field ">
        <legend>功能导航</legend>
        <div class="layui-field-box ">
            <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                    th:href="@{/shop/shop_traffic_dy(shopId=${shopId})}"><img src="/images/traffic.jpeg" width="25px" height="25px" />流量统计</a>

            <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                th:href="@{/douyin/order_list(shopId=${shopId})}">订单查询</a>
           
            <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                th:href="@{/douyin/order_excel_import_review(shopId=${shopId})}">excel导入订单</a>
            <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                th:href="@{/shop/goods_list(shopType=6,shopId=${shopId})}">商品管理</a>
            <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                th:href="@{/douyin/refund_list(shopId=${shopId})}">退货管理</a>
            
        </div>
    </fieldset>

    <div class="message-body">
       
        <div class="message-card-box">
            <div class="layui-tab layui-tab-card my-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">全部信息<span></span></li>
                    <li>订单信息<span></span></li>
                    <li>退款信息<span></span></li>
                    <li>发布新商品 <span></span></li>
                    <li>库存预警<span></span></li>
                </ul>
                <div class="layui-tab-content" style="min-height: 100px;">
                    <div class="layui-tab-item layui-show">
                        <div class="massgae-box">
<!--                            <div class="message-item">-->
<!--                                <div class="message-left">-->
<!--                                    <img src="./image/green-icon.png" alt="">-->
<!--                                    <span>您有一条新的订单信息</span>-->
<!--                                </div>-->
<!--                                <div class="message-right">-->
<!--                                    2020-03-12  21:56:22-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="message-item">-->
<!--                                <div class="message-left">-->
<!--                                    <img src="./image/danger-icon.png" alt="">-->
<!--                                    <span>您有一条新的退款信息</span>-->
<!--                                </div>-->
<!--                                <div class="message-right">-->
<!--                                    2020-03-12  21:56:22-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="message-item">-->
<!--                                <div class="message-left">-->
<!--                                    <img src="./image/tip-icon.png" alt="">-->
<!--                                    <span>有新商品发布</span>-->
<!--                                </div>-->
<!--                                <div class="message-right">-->
<!--                                    2020-03-12  21:56:22-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                    </div>
                    <div class="layui-tab-item"></div>
                    <div class="layui-tab-item"></div>
                    <div class="layui-tab-item"></div>
                    <div class="layui-tab-item"></div>
                    <div class="layui-tab-item"></div>
                </div>
            </div>

        </div>
    </div>

    <script type="text/javascript" src="/static/goods/Tips/Tips.min.js"></script>

    <script>
        $(function () {
            $(".dyauth").click(function () {
                let shopId = $(this).attr('shopId');
                if(confirm("授权抖音店铺?")){
                    var data = {shopId: shopId};
                    $.ajax({
                        url: "/ajax_douyin/oauth",
                        type: "POST",
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify(data),
                        success: function (res) {
                            if (res.code == 0) {
                                alert("授权成功");
                            } else {
                                alert(res.msg);
                                return false;
                            }
                        }
                    });
                }
            });
        })
    </script>
</div>
</body>
</html>
